<template>
  <div class="home">
    <my-input></my-input>
    <div class="list-box">
      <div class="left">
        <my-list type="work" class="top">正在进行...</my-list>
        <my-list type="finish" class="bottom">已经完成</my-list>
      </div>
      <div class="right">
        <my-list type="all">ALL全部任务</my-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import myInput from "@/components/myInput/myInput";
import myList from "@/components/myList/myList";
</script>
<style lang="scss" scoped>
.home {
  width: 1200px;
  margin: 20px auto;
}
.list-box {
  display: flex;
  height: 800px;
  box-sizing: border-box;
  border: 2px solid #333;
  background-color: #333;
  justify-content: space-between;
  .left, .right {
    flex-basis: 48%;
    height: 100%;
    background-color: #cdcdcd;
  }
  .top, .bottom {
    height: 400px;
    overflow: auto;
  }
  .right {
    overflow: auto;
  }
}
</style>